<%@ page import="java.net.InetAddress" language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<%
String ip = ""; 
InetAddress inetAddress = InetAddress.getLocalHost();
ip = inetAddress.getHostAddress();
%>

<script type="text/javascript">
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

function setAngle()
{
	url = <%out.print('"' + "http://" + ip + ":8080/Kinect_WebServer/SetAngle" + '"'); %>

	var angle = document.getElementById("angleInput").value;
    xmlhttp.open("GET", url + "?angle=" + angle, true);
    xmlhttp.onreadystatechange = useHttpResponse;
    xmlhttp.send(null);
}
function useHttpResponse() {
	if(xmlhttp.readyState == 4) {
		refreshImg("depthImg");
		refreshImg("colorImg");
	}
}
function refreshImg(id) {
	   var obj = document.getElementById(id);
	   var src = obj.src;
	   var pos = src.indexOf('?');
	   if (pos >= 0) {
	      src = src.substr(0, pos);
	   }
	   var date = new Date();
	   obj.src = src + '?v=' + date.getTime();
	   return false;
}
</script>

<img src= <%out.print('"' + "http://" + ip + ":8080/Kinect_WebServer/DepthFrame?v=haha" + '"'); %> alt="DepthFrame" width="640" height="480" id="depthImg"/>
<br/>
<img src= <%out.print('"' + "http://" + ip + ":8080/Kinect_WebServer/ImageFrame?v=haha" + '"'); %> alt="ImageFrame" width="640" height="480" id="colorImg"/>
<br/>
Set Angle: <input type="text" name="angle" id="angleInput">
<button type="button" onclick="setAngle()"> set angle </button>

</body>
</html>